<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="!token" class="force-login-wrap">
			<!-- <image class="logo-bg" src="@/static/images/logo_bg.png" mode="aspectFill"></image> -->
			<view class="force-login__content y-f">
				<open-data class="user-avatar" type="userAvatarUrl"></open-data>
				<open-data class="user-name" type="userNickName"></open-data>
				<view class="login-notice">为了提供更优质的服务，需要获取您的头像昵称</view>
				<button class="cu-btn author-btn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看</button>
				<button class="cu-btn author-btn" v-else @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看</button>
				<button class="cu-btn close-btn" @tap="back">暂不授权</button>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="force-login-wrap">
			<!-- <image class="logo-bg" src="@/static/images/logo_bg.png" mode="aspectFill"></image> -->
			<view class="force-login__content y-f">
				<view class="login-notice">为了提供更优质的服务，请先登录</view>
				<button class="cu-btn author-btn" @tap="toLogin">去登录</button>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		wxappAuth,
		getUser
	} from '@/api/user'
	import dayjs from 'dayjs'
	import cookie from '@/utils/store/cookie'
	import {
		login,
		authorize
	} from '@/utils'

	export default {
		data() {
			return {
				authorize: false,
				canIUseGetUserProfile: false,
			}
		},
		computed: {
			...mapState(['isAuthorization', '$deviceType', 'token']),
		},
		onLoad(options) {
			console.log('__________onLoad_________')
			console.log('_____options_________',options)
			console.log('wx.getUserProfile', wx.getUserProfile)
			this.sqdl=options.sqdl
			if (wx.getUserProfile) {
				console.log(this)
				this.canIUseGetUserProfile = true 
				console.log(this.canIUseGetUserProfile)
			}
			// // 先校验用户是否授权，如果没有授权，显示授权按钮
		},
		onHide() {
				console.log('onHide')
			this.updateAuthorizationPage(false)
			this.changeAuthorization(false)
		},
		onUnload() {
				console.log('onUnload')
			this.updateAuthorizationPage(false)
			this.changeAuthorization(false)
		},
		methods: {
			...mapActions(['changeAuthorization', 'setUserInfo']),
			...mapMutations(['updateAuthorizationPage']),
			toLogin() {
				this.$yrouter.push({
					path: '/pages/user/Login/index',
					query: {},
				})
			},
			back() {
				this.$yrouter.switchTab({
					path: '/pages/home/index',
					query: {},
				})
			},
			getUserInfo(data) {
				console.log(data)
				console.log('getUserInfo')
				if (data.detail.errMsg == 'getUserInfo:fail auth deny') {
					uni.showToast({
						title: '取消授权',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				uni.showLoading({
					title: '登录中',
				})
				login()
					.then(e => {
						uni.hideLoading()
						console.log('重定向1')
						this.$yrouter.reLaunch({
							path: cookie.get('redirect').replace(/\ /g, ''),
						})
					})
					.catch(error => {
						uni.hideLoading()
						console.log(error)
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000,
						})
					})
			},
			getUserInfoProfile(data) {
				console.log('getUserInfoProfile')
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '需要获取您的信息用来展示',
					success: res => {
						console.log(res)
						uni.showLoading({
							title: '登录中',
						})
						login(res)
							.then(e => {
								console.log('重定向2',e)
								this.$yrouter.reLaunch({
									path: cookie.get('redirect').replace(/\ /g, ''),
								})
							})
							.catch(error => {
								console.log(error)
								uni.showToast({
									title: error,
									icon: 'none',
									duration: 2000,
								})
							})
					},
				})
			},
		},
		mounted() {
			console.log("-00-0-0-");
			console.log('wx.getUserProfile', wx.getUserProfile)
			if (wx.getUserProfile) {
				console.log('___mounted___',this)
				this.canIUseGetUserProfile = true
				console.log(this.canIUseGetUserProfile)
			}
		},
	}
</script>

<style lang="less">
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
	}

	.force-login-wrap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 11111;
		top: 0;

		.logo-bg {
			width: 640rpx;
			height: 300rpx;
		}

		.force-login__content {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.user-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 40rpx;
			}

			.user-name {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000;
				margin-bottom: 30rpx;
			}

			.login-notice {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000;
				line-height: 44rpx;
				width: 500rpx;
				text-align: center;
				margin-bottom: 80rpx;
			}

			.author-btn {
				width: 630rpx;
				height: 80rpx;
				background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
				background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
				// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}

			.close-btn {
				width: 630rpx;
				height: 80rpx;
				margin-top: 30rpx;
				border-radius: 40rpx;
				border: 2rpx solid #eb3729;
				background: none;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #eb3729;
			}
		}
	}
</style>
